<template>
  <div class="ai-feature-base">
    <!-- 导航栏 -->
    <van-nav-bar
      :title="title"
      left-arrow
      @click-left="$router.go(-1)"
      class="custom-nav-bar"
    >
      <template #right>
        <van-icon name="setting-o" @click="showSettings = true" />
      </template>
    </van-nav-bar>

    <!-- 功能介绍区域 -->
    <div class="intro-section" v-if="showIntro">
      <div class="intro-content">
        <div class="intro-icon">{{ icon }}</div>
        <div class="intro-text">
          <h3>{{ title }}</h3>
          <p>{{ description }}</p>
        </div>
        <div class="intro-stats" v-if="stats">
          <div class="stat-item" v-for="stat in stats" :key="stat.label">
            <span class="stat-value">{{ stat.value }}</span>
            <span class="stat-label">{{ stat.label }}</span>
          </div>
        </div>
      </div>

      <!-- 快速示例 -->
      <div class="examples-section" v-if="examples && examples.length > 0">
        <div class="examples-title">💡 {{ examplesTitle || '试试这些：' }}</div>
        <div class="examples-grid">
          <div
            v-for="example in examples"
            :key="example.text || example"
            class="example-item"
            @click="selectExample(example)"
          >
            <div class="example-icon" v-if="example.icon">{{ example.icon }}</div>
            <span class="example-text">{{ example.text || example }}</span>
          </div>
        </div>
      </div>

      <!-- 模式选择 -->
      <div class="modes-section" v-if="modes && modes.length > 0">
        <div class="modes-title">选择模式：</div>
        <div class="modes-grid">
          <div
            v-for="mode in modes"
            :key="mode.id"
            :class="['mode-item', { active: currentMode === mode.id }]"
            @click="selectMode(mode)"
          >
            <div class="mode-icon">{{ mode.icon }}</div>
            <div class="mode-info">
              <div class="mode-name">{{ mode.name }}</div>
              <div class="mode-desc">{{ mode.description }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="main-content" :class="{ 'with-intro': showIntro }">
      <slot name="content"></slot>
    </div>

    <!-- 输入区域 -->
    <div class="input-section" v-if="showInput">
      <div class="input-wrapper">
        <van-field
          v-model="inputText"
          :placeholder="inputPlaceholder"
          type="textarea"
          rows="1"
          autosize
          @keyup.enter="handleSend"
          class="message-input"
          :disabled="isLoading"
        />
        <div class="input-actions">
          <van-button
            v-if="supportVoice"
            size="small"
            type="default"
            icon="volume-o"
            @click="toggleVoiceInput"
            :disabled="isLoading"
          >
            语音
          </van-button>
          <van-button
            v-if="supportImage"
            size="small"
            type="default"
            icon="photo-o"
            @click="selectImage"
            :disabled="isLoading"
          >
            图片
          </van-button>
          <van-button
            type="primary"
            size="large"
            :loading="isLoading"
            @click="handleSend"
            class="send-btn"
            :disabled="!canSend"
          >
            <van-icon name="send" />
          </van-button>
        </div>
      </div>

      <!-- 快速操作 -->
      <div class="quick-actions" v-if="quickActions && quickActions.length > 0">
        <van-button
          v-for="action in quickActions"
          :key="action.id"
          size="small"
          :type="action.type || 'default'"
          :icon="action.icon"
          @click="handleQuickAction(action)"
          :disabled="isLoading"
        >
          {{ action.text }}
        </van-button>
      </div>
    </div>

    <!-- 设置弹窗 -->
    <van-popup v-model:show="showSettings" position="bottom" :style="{ height: '60%' }">
      <div class="settings-panel">
        <div class="settings-header">
          <h3>设置</h3>
          <van-button size="small" @click="showSettings = false">关闭</van-button>
        </div>
        <div class="settings-content">
          <slot name="settings"></slot>
        </div>
      </div>
    </van-popup>

    <!-- 图片预览 -->
    <van-image-preview
      v-model:show="showImagePreview"
      :images="previewImages"
      :start-position="previewIndex"
      @close="showImagePreview = false"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { showToast } from 'vant'

// Props定义
interface Props {
  title: string
  icon?: string
  description?: string
  showIntro?: boolean
  showInput?: boolean
  inputPlaceholder?: string
  supportVoice?: boolean
  supportImage?: boolean
  examples?: Array<string | { text: string; icon?: string; data?: any }>
  examplesTitle?: string
  modes?: Array<{ id: string; name: string; description: string; icon: string }>
  quickActions?: Array<{ id: string; text: string; icon?: string; type?: string; action?: string }>
  stats?: Array<{ label: string; value: string | number }>
  isLoading?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  showIntro: true,
  showInput: true,
  inputPlaceholder: '请输入内容...',
  supportVoice: false,
  supportImage: false,
  isLoading: false
})

// Emits定义
const emit = defineEmits<{
  send: [text: string]
  selectExample: [example: any]
  selectMode: [mode: any]
  quickAction: [action: any]
  voiceInput: []
  imageSelect: []
}>()

// 响应式数据
const inputText = ref('')
const currentMode = ref('')
const showSettings = ref(false)
const showImagePreview = ref(false)
const previewImages = ref<string[]>([])
const previewIndex = ref(0)

// 计算属性
const canSend = computed(() => {
  return inputText.value.trim().length > 0 && !props.isLoading
})

// 方法
const handleSend = () => {
  if (!canSend.value) return
  
  const text = inputText.value.trim()
  inputText.value = ''
  emit('send', text)
}

const selectExample = (example: any) => {
  if (typeof example === 'string') {
    inputText.value = example
  } else {
    inputText.value = example.text
  }
  emit('selectExample', example)
}

const selectMode = (mode: any) => {
  currentMode.value = mode.id
  emit('selectMode', mode)
  showToast(`已切换到${mode.name}模式`)
}

const handleQuickAction = (action: any) => {
  emit('quickAction', action)
}

const toggleVoiceInput = () => {
  emit('voiceInput')
}

const selectImage = () => {
  emit('imageSelect')
}

const previewImage = (url: string, urls?: string[]) => {
  previewImages.value = urls || [url]
  previewIndex.value = urls ? urls.indexOf(url) : 0
  showImagePreview.value = true
}

// 暴露方法给父组件
defineExpose({
  previewImage,
  setInputText: (text: string) => {
    inputText.value = text
  },
  clearInput: () => {
    inputText.value = ''
  }
})
</script>

<style scoped>
.ai-feature-base {
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  display: flex;
  flex-direction: column;
}

.custom-nav-bar {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.intro-section {
  padding: 20px 16px;
  background: white;
  margin: 16px;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.intro-content {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.intro-icon {
  font-size: 48px;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8fafc;
  border-radius: 16px;
  border: 1px solid #e2e8f0;
}

.intro-text h3 {
  font-size: 20px;
  font-weight: 600;
  color: #1e293b;
  margin: 0 0 8px 0;
}

.intro-text p {
  font-size: 14px;
  color: #64748b;
  margin: 0;
  line-height: 1.4;
}

.intro-stats {
  display: flex;
  gap: 16px;
  margin-left: auto;
}

.stat-item {
  text-align: center;
}

.stat-value {
  display: block;
  font-size: 18px;
  font-weight: 600;
  color: #3b82f6;
}

.stat-label {
  font-size: 12px;
  color: #64748b;
}

.examples-section, .modes-section {
  margin-top: 20px;
}

.examples-title, .modes-title {
  font-size: 14px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 12px;
}

.examples-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.example-item {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 8px 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 13px;
  color: #475569;
}

.example-item:hover {
  background: #e2e8f0;
  border-color: #3b82f6;
  color: #3b82f6;
}

.example-icon {
  font-size: 14px;
}

.modes-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.mode-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #f8fafc;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.mode-item:hover {
  border-color: #3b82f6;
  background: #eff6ff;
}

.mode-item.active {
  border-color: #3b82f6;
  background: #dbeafe;
}

.mode-icon {
  font-size: 24px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
}

.mode-name {
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 4px;
}

.mode-desc {
  font-size: 13px;
  color: #64748b;
}

.main-content {
  flex: 1;
  padding: 0 16px;
  margin-bottom: 16px;
}

.main-content.with-intro {
  padding-top: 0;
}

.input-section {
  background: white;
  border-top: 1px solid #e2e8f0;
  padding: 16px;
}

.input-wrapper {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 12px;
}

.message-input {
  flex: 1;
  background: #f8fafc;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
}

.input-actions {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}

.send-btn {
  border-radius: 12px;
  min-width: 48px;
}

.quick-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.settings-panel {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.settings-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid #e2e8f0;
}

.settings-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.settings-content {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

/* 响应式设计 */
@media (min-width: 768px) {
  .intro-section {
    margin: 20px 40px;
    padding: 32px;
  }

  .main-content {
    padding: 0 40px;
  }

  .examples-grid {
    gap: 12px;
  }

  .modes-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}
</style>
